<template>
  <div>
    <a-list item-layout="horizontal" :data-source="options">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta>
            <template #title>

              <a-popover placement="right" :title="item.name"
                         @openChange="handleHoverChange(item.catId)">
                <template #content>

                  <a-row>
                    <a-col :span="24">
                      <p v-for="menu in secondMenu" style="color: #3b4249">
                        <a-tag color="#108ee9">
                          {{menu.name}}
                        </a-tag>
                        <a v-for="third in menu.childList" @click="handleItem(third, menu)">
                          <a-tag :bordered="false" color="processing">
                            {{third.name}}
                          </a-tag>
                        </a>
                      </p>
                    </a-col>
                  </a-row>

                </template>
                <span>{{item.name}}</span>
              </a-popover>

            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>
<script>
import {message} from "ant-design-vue";
import {onBeforeUnmount} from "vue";
import {publish, subscribe} from "pubsub-js";

export default {
  data () {
    return {
      selectedKeys: [],
      options: [],
      secondMenu: [],
      secondMenuMap: null, // <key: 一级catID, value: 一级catId下所有的child>
      menuMap: null, //<key: 三级catID, value: 一级菜单对象>
      open: false,
    }
  },
  methods: {
    handleHoverChange(data){
      //data-> 一级菜单catId
      this.open = true
      this.secondMenu = this.secondMenuMap.get(data)
    },

    handleItem(thirdItem, secondList){
      //组装数据
      let param = this.menuMap.get(secondList.parentCid)
      let routes = {thirdItem: thirdItem, secondItem: {catId: secondList.catId, name: secondList.name},routes: []};
      //深拷贝
      let que1 = Array.from([param])

      while (que1.length > 0){
        let count = que1.length
        let collect = []
        for (let i = 0; i < count; i++) {
          //对一层的全部节点遍历
          let head = que1.shift()
          let head2 = {name: head.name, catId: head.catId}
          if(head.childList !== undefined){
            head2["children"] = []  //为其添加新属性
            let array = Array.from(head.childList)
            array.forEach(item => {
              let temp = {catId: item.catId ,name: item.name}
              head2.children.push(temp)
              que1.push(item)
            })
          }
          collect.push(head2)
        }
        routes.routes.push(collect)
      }
      //跳转到检索页面，并传参
      publish('routes', routes)
      this.$router.push({
        name: 'search',
      })
    },

    getCategory(){
      this.$http({
        url: '/product/category/list/tree',
        method: 'get'
      }).then((data) => {
        if(data.code === 0){
          this.options = Array.from(data.data)
          this.secondMenuMap = new Map()
          this.menuMap = new Map()
          this.options.forEach(item => {
            this.secondMenuMap.set(item.catId, item.childList)
            this.menuMap.set(item.catId, item)
          })
        }
      }).catch((err) => {
        console.log("失败", err)
        message.error("获取分类表失败咯！ "+err.message)
      })
    }
  },
  created() {
    this.getCategory();
  }
}
</script>

